<template>
  <div class="home_container">
    <el-container>
      <el-header>
        <div class="nav" v-if="btnIndex == true">
          <div>
            <el-button type="primary" @click="onRankThree">排列三</el-button>
            <el-button type="info" @click="onRankSeven">七星彩</el-button>
          </div>
          <div>
            <el-button size="medium" @click="logout">退出登陆</el-button>
          </div>
        </div>
        <div class="nav" v-if="btnIndex == false">
          <div>
            <el-button type="info" @click="onRankThree">排列三</el-button>
            <el-button type="primary" @click="onRankSeven">七星彩</el-button>
          </div>
          <div>
            <el-button size="medium" @click="logout">退出登陆</el-button>
          </div>
        </div>
      </el-header>
      <el-main>
        <!-- 匹配到的子路由 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        btnIndex: true,
      };
    },
    methods: {
      onRankThree() {
        this.btnIndex = true;
        this.$router.push({
          path: "/rankTree"
        });
      },
      onRankSeven() {
        this.btnIndex = false;
        this.$router.push({
          path: "/rankSeven"
        });
      },

      // 退出登陆
      logout() {
        window.sessionStorage.clear()
        window.localStorage.clear()
        this.$message.success("退出成功");
        this.$router.push('/login')
      }

    }
  }
</script>

<style scoped="scoped">
  .home_container {
    height: 100%;
    margin: 0px 15%;
  }

  .el-header,
  .el-main {
    padding: 0;
    margin: 0;
  }

  .nav {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
